//柱状图
(function () {
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 数据变化

  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
    },
    grid: {
      left: "0",
      top: "20px",
      right: "0",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业",
        ],
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "8",
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "8",
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        itemStyle: {
          color: "#2f89cf",
          barBorderRadius: 5,
        },
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
      },
    ],
  };
  myChart.setOption(option);
  var dataAll = [
    { year: "2020", data: [200, 300, 300, 900, 1500, 1200, 600] },
    { year: "2021", data: [300, 400, 350, 800, 1800, 1400, 700] },
  ];
  //$(xxx).on('click','要选择的元素',function(){})
  //$(this).index()获取选择元素的索引
  $(".bar h2").on("click", "a", function () {
    option.series[0].data = dataAll[$(this).index()].data;
    myChart.setOption(option);
  });
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
//柱状图2
(function () {
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  var option = {
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%",
    },

    xAxis: {
      show: false,
    },
    yAxis: [
      {
        type: "category",
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        inverse: true,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        //不显示刻度
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      {
        type: "category",
        data: [702, 350, 610, 793, 664],
        inverse: true,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        //不显示刻度
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        barWidth: 10,
        barCategoryGap: 50,
        itemStyle: {
          barBorderRadius: 20,
          color: function (arg) {
            return myColor[arg.dataIndex];
          },
        },
        label: {
          show: true,
          // 图形内显示
          position: "inside",
          // 文字的显示格式
          formatter: "{c}%",
          color: "#fff",
        },
      },
      {
        name: "框",
        type: "bar",
        data: [100, 100, 100, 100, 100],
        yAxisIndex: 1,
        barWidth: 15,
        itemStyle: {
          color: "none",
          barBorderRadius: 20,
          borderColor: "#00c1de",
          borderWidth: 3,
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
//折线图
(function () {
  var myChart = echarts.init(document.querySelector(".line .chart"));
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      textStyle: {
        color: "#3468b9",
        fontSize: "12",
      },
      right: "10%",
      data: ["新增粉丝", "新增游客"],
    },
    grid: {
      top: "20px",
      left: 0,
      right: 0,
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false, // 去除刻度线
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12",
        },
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "新增粉丝",
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: "line",
        smooth: true,
      },
      {
        name: "新增游客",
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: "line",
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
//折线图2
(function () {
  var myChart = echarts.init(document.querySelector(".line2 .chart"));

  var option = {
    color: ["#0184d5", "#00d887"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      textStyle: {
        color: "rgba(255,255,255,.6)",
      },
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true,

      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "26",
          "28",
          "29",
          "30",
        ],
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "播放量",
        type: "line",
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: "#0184d5",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        smooth: true,
        lineStyle: {
          color: "#0184d5",
          width: 2,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)",
              },
            ]),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [
          30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40, 30,
          40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40,
        ],
      },
      {
        name: "转发量",
        type: "line",
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: "#00d887",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        smooth: true,
        lineStyle: {
          color: "#00d887",
          width: 2,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 216, 135, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(0, 216, 135, 0.1)",
              },
            ]),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [
          50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60, 10,
          50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40,
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
//饼图1
(function () {
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var option = {
    tooltip: {
      trigger: "item",
      formatter:'{a}: <br />{b}:{c}({d}%)',
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
    legend: {
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12,
      },
      itemWidth: 10,
      itemHeight: 10,
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    },
    color: [
      "#065aab",
      "#066eab",
      "#0682ab",
      "#0696ab",
      "#06a0ab",
      "#06b4ab",
      "#06c8ab",
      "#06dcab",
      "#06f0ab",
    ],
    series: [
      {
        name: "年龄分布",
        type: "pie",
        radius: ["40%", "60%"],
        center:["50%","40%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },

        labelLine: {
          show: false,
        },
        data: [
          { value: 1, name: "0岁以下" },
          { value: 4, name: "20-29岁" },
          { value: 2, name: "30-39岁" },
          { value: 2, name: "40-49岁" },
          { value: 1, name: "50岁以上" },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
//南丁格尔图
(
    function(){
        var myChart = echarts.init(document.querySelector(' .pie2 .chart'))
        var option = {
            legend: {
                top: '75%',
                itemWidth:10,
                itemHeight:10
              },
              tooltip:{
                trigger:"item",
                formatter:'{a} :<br /> {b} {c} ({d}%)'
              },
              color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff",
                "#9fe6b8",
                "#32c5e9",
                "#1d9dff",
              ],
              series: [
                {
                  name: '点位统计',
                  type: 'pie',
                  radius: ["10%", "55%"],
                  center: ['50%', '38%'],
                  roseType: 'area',
                  itemStyle: {
                    borderRadius: 8
                  },
                  data: [
                    { value: 20, name: "云南" },
                    { value: 26, name: "北京" },
                    { value: 24, name: "山东" },
                    { value: 25, name: "河北" },
                    { value: 20, name: "江苏" },
                    { value: 25, name: "浙江" },
                    { value: 30, name: "深圳" },
                    { value: 42, name: "广东" },
                  ],
                }
              ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function(){
            myChart.resize()
        })
    }
)();